<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template slot="filter-content">

        <el-input v-model="listQuery.params.name" placeholder="搜索单位名称" style="width: 200px;" class="filter-item" />
        <el-input v-model="listQuery.params.contact" placeholder="搜索姓名" style="width: 200px;" class="filter-item" />
      </template>

      <template slot="data-columns">

        <el-table-column
          label="单位名称"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          label="联系人"
          prop="contact"
          align="center"
        />
        <el-table-column
          label="电话"
          prop="phone"
          align="center"
        />
        <el-table-column
          label="地址"
          prop="address"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleDel(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { mapGetters } from 'vuex'
import { del } from '@/api/coo/coo'
export default {
  name: 'CooList',
  components: { DataTable },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/coo/api/paging'
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  methods: {

    // 颁发
    handleDel(id) {
      const data = { id: id }
      console.log(data)
      del(data).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$refs.pagingTable.getList()
      })
    }
  }
}
</script>

<style scoped>
</style>
